import React, {useEffect, useState} from 'react';

const UseEffectDemo = () => {

    const [title, setTitle] = useState('UseEffect');
    const [count, setCount] = useState(0);

    useEffect(() => {
        // 组件渲染完成调用
        console.log('+ 组件渲染完成。。。');
        document.title = title;

        return () => {
            // 组件卸载的时候调用
            console.log('- 组件卸载了 ···')
            document.title = 'Default';
        }
    }, [title]);

    useEffect(() => {
        call()
        return () => {
            console.log('- call')
        }
    }, [count])

    return (
        <div>
            <h1>Use Effect Demo</h1>
            <button onClick={() => setTitle(title + '1')}>UseEffect</button>
            <button onClick={() => setCount(count + 1)}>Count</button>
        </div>
    );
};

const call = function () {
    console.log('call is called');
};

export default UseEffectDemo;